<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="zTree/css/demo.css">
    <link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="zTree//js/jquery.ztree.exedit.js"></script>
    <link rel="stylesheet" href="semantic/semantic.min.css"/>
    <script src="semantic/semantic.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="layer/layer.js"></script>
    <title>数据加工</title>
</head>
<body>
<div class="ui two column doubling stackable grid container" style="height: 100%">
    <div class="column" style="background-color: #AEDD81">
        <textarea name="content" id="content" type="text" placeholder="全屏输入" onkeydown="enterBtn(event.keyCode)"
                  style="width: 100%;height: 40%;margin-top: 1%"></textarea>
        <div style="margin-top: 1%">
            <label>通用</label>
            <label style="margin-left: 6px">首尾括号:<input id="isAdd" name="isAdd" type="checkbox" value=""/></label>
            <label style="margin-left: 6px">去重:<input id="isRemoveMulti" name="isRemoveMulti" type="checkbox" value=""/></label>
        </div>
        <div style="margin-top: 1%">
            <label>正则</label>
            <label style="margin-left: 6px">忽略大小写:<input id="isIgnoreZCase" name="isMulti" type="checkbox"
                                                         value=""/></label>
            <label style="margin-left: 6px">开启多行:<input id="isMulti" name="isMulti" type="checkbox" value=""/></label>
            <label style="margin-left: 6px">组模式:<input id="isGroup" name="isGroup" type="checkbox" value=""/></label>
        </div>
        <div class="ui input">
            <input name="regular" id="regular" type="text" placeholder="正则">
        </div>

        <div class="ui buttons">
            <button class="ui red button" type="submit" onclick="regular(1)">正则</button>
            <button class="ui red button" type="submit" onclick="regular(2)">正则+逗号</button>
            <button class="ui red button" type="submit" onclick="regular(3)">正则+引号</button>

            <button id="clear" class="ui white button" type="button" style="margin-left: 35%"
                    onclick="clearIs()">重置
            </button>
        </div>

        <div class="ui input">
            <input name="regular" id="concat" type="text" placeholder="拼接公式">
        </div>

        <div class="ui buttons">
            <button class="ui red button" type="submit" onclick="concat()">拼接</button>
        </div>
        <div>
            <div class="ui buttons" style="margin-top: 1%">
                <button class="ui red button" type="submit" onclick="simple(1)">逗号</button>
                <button class="ui red button" type="submit" onclick="simple(2)">引号</button>
            </div>
        </div>

        <div>
            <div class="ui buttons" style="margin-top: 1%">
                <button class="ui red button" type="submit" onclick="removeDuplicate()">过滤</button>
                <button class="ui red button" type="submit" onclick="sudoku()">数独</button>
                <button class="ui red button" type="submit" onclick="calculator()">计算器</button>
            </div>
        </div>

        <div class="ui input">
            <input name="regular" id="hex" type="text" placeholder="进制" value="2">
        </div>
        <div class="ui buttons" style="margin-top: 1%">
            <button class="ui red button" type="submit" onclick="hex()">进制</button>
        </div>

        <div class="ui buttons" style="margin-top: 1%">
            <form class="ui form" enctype="multipart/form-data">

                <div class="inline field">
                    <input type="file" name="multipartFile"
                           id="multipartFile" value="上传文件"/>

                    <button class="ui primary button" type="button"
                            onclick="importExcel();">上传
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="column" style="background-color: #FC9D99;">
        <textarea name="content_new" id="content_new" type="text" placeholder=""
                  style="width: 100%;height: 100%;margin-top: 1%"></textarea>
    </div>
</div>


<div class="ui longer modal">
    <div class="content">
       <textarea name="content" id="contentDup" type="text" placeholder=""
                 style="width: 100%;height: 300px;margin-top: 1%"></textarea>
    </div>
    <div class="actions">
        <div class="ui cancel button">Cancel</div>
        <div class="ui approve button">OK</div>
    </div>
</div>

</body>
<script type="text/javascript">
    function clearIs() {
        $("#content").val("");
        $("#isAdd").attr("checked", false)  //如果鼠标点击选中了，执行后无法取消选中
        $("#isAdd").prop("checked", false)   //如果鼠标点击选中了，执行后可以取消选中
        $("#regular").val("")
    }

    function importExcel() {
        var files = $('#multipartFile').prop('files');

        var formData = new FormData();
        formData.append("multipartFile", files[0]);
        type = $("#picType").val();
        formData.append("type", type);

        $.ajax({
            url: '/dataMachining/readFile',
            type: 'POST',
            async: false,
            data: formData,
            dataType: 'json',
            cache: false, // 上传文件无需缓存
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (data) {
                $("#content_new").val(data.responseText);
            },
            error: function (response) {
                $("#content_new").val(response.responseText);
            }
        });
    }

    function enterBtn(a) {
        console.log(a)
        if (a == 13) {
            let content = $("#content").val();
            if (content == '') {
                return;
            }
            if (content.indexOf("=") != -1) {
                calculator()
            }
        }
    }

    function hex() {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        const hex = $("#hex").val();
        if (hex == '') {
            alert("进制不能为空")
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/hex",
            cache: false,
            data: {
                "hex": hex,
                "content": content,
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }

    $("content").keydown(function (event) {
        alert("111")
        alert("Key: " + event.which);
    });

    /*
      正则匹配
     */
    function regular(type) {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        const regular = $("#regular").val();
        if (regular == '') {
            alert("正则表达式不能为空")
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/regular",
            cache: false,
            data: {
                "type": type,
                "regular": regular,
                "content": content,
                "isAdd": $("#isAdd").is(':checked'),
                "isMulti": $("#isMulti").is(':checked'),
                "isRemoveMulti": $("#isRemoveMulti").is(':checked'),
                "isIgnoreZCase": $("#isIgnoreZCase").is(':checked'),
                "isGroup": $("#isGroup").is(':checked')
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }

    /*
      正则匹配
     */
    function concat() {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        const concat = $("#concat").val();
        if (concat == '') {
            alert("拼接公式不能为空")
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/concat",
            cache: false,
            data: {
                "concat": concat,
                "content": content
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }

    function simple(type) {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/simple",
            cache: false,
            data: {
                "type": type,
                "content": content,
                "isAdd": $("#isAdd").is(':checked'),
                "isRemoveMulti": $("#isRemoveMulti").is(':checked')
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }

    function calculator() {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/calculator",
            cache: false,
            data: {
                "content": content,
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }


    function sudoku() {
        const content = $("#content").val();
        if (content == '') {
            return;
        }

        $.ajax({
            type: "POST",
            url: "dataMachining/sudoku",
            cache: false,
            data: {
                "content": content,
            },
            success: function (data) {
                $("#content_new").val(data);
            },
            failure: function (data) {
                $("#content_new").val(data);
            }
        });
    }

    function removeDuplicate() {
        $(".ui.longer.modal")
            .modal({
                onApprove: function () { //单击确认按钮
                    const content = $("#content").val();
                    const contentDup = $("#contentDup").val();
                    $.ajax({
                        type: "POST",
                        url: "dataMachining/removeDup",
                        cache: false,
                        data: {
                            "content": content,
                            "contentDup": contentDup,
                            "isRemoveMulti": $("#isRemoveMulti").is(':checked')
                        },
                        success: function (data) {
                            $("#content_new").val(data);
                            $("#contentDup").val("");
                        }
                    });
                }
            })
            .modal("show");
    }
</script>
</html>